<script setup>
import messageCenterService from '@/services/message-center.service';
import { AxiosError } from 'axios';
import { ElLoading, ElMessage, ElMessageBox, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton, ElIcon, ElButtonGroup } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close, Bell, Check } from "@element-plus/icons-vue";
import { ElDivider } from "element-plus";
const createDefaultSearchEntity = () => {
    const e = {};
    return e;
}

const router = useRouter();
const route = useRoute();
const page = ref({});
const searchEntity = ref(createDefaultSearchEntity());
const tableLoading = ref(false);

const load = async (no, size, searchObj) => {
    try {
        tableLoading.value = true;
        // const res = await messageCenterService.page(no, size, searchObj);
        // page.value = res;
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        tableLoading.value = false;
    }
}

const pageChanged = async (no) => {
    await load(no, page.value.size, searchEntity.value);
}

const pageSizeChanged = async (size) => {
    await load(1, size, searchEntity.value);
}

const readAll = async () => {
    const param = {};
    param.all = true;
    await readMessages(param);
}

const readOne = async (msg) => {
    const param = {};
    param.all = false;
    param.ids = [msg.id];
    await readMessages(param);
}

const readMessages = async (param) => {
    try {
        await messageCenterService.read(param);
        load(undefined, page.value.size);
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {

    }
}

onMounted(async () => {
    await load();
});
</script>

<template>
    <div class="mb-2">
        <ElButtonGroup>
            <ElButton plain :size="'small'" :icon="Check" @click="readAll">全部标为已读</ElButton>
        </ElButtonGroup>
    </div>
    <div class="message-list">
        <div class="message-item" v-for="msg of page.content" :key="msg.id">
            <template v-if="msg.type == 'NOTICE'">
                <div class="flex flex-row">
                    <div class="flex-none">
                        <ElIcon>
                            <Bell></Bell>
                        </ElIcon>
                    </div>
                    <div class="grow px-2">
                        <a href="javascript:void(0);" class="no-underline text-[#377d9b]">
                            {{ msg.senderName }} 发布了系统通知
                        </a>
                        <div class="text-sm text-[#8c92a4]">
                            <div class="pt-2">
                                标题： {{ msg.title }}
                            </div>
                            <div class="pt-2">
                                内容： {{ msg.content }}
                            </div>
                            <div class="pt-2">
                                发布时间：{{ msg.createdTime }}
                            </div>
                        </div>
                    </div>
                    <div class="flex-none">
                        <ElButton v-if="!msg.readState" link type="primary" @click="readOne(msg)">标为已读</ElButton>
                    </div>
                </div>
                <ElDivider></ElDivider>
            </template>
            <template v-else>

            </template>
        </div>
    </div>
    <ElPagination layout="prev, pager, next, sizes, jumper, total" :total="Number(page.totalElements)"
        :current-page="page.number" :page-size="page.size" :page-sizes="[10, 30, 50, 100, 200]"
        @current-change="pageChanged($event)" @size-change="pageSizeChanged($event)" />
</template>

<style lang="scss"></style>